<template>
	<view class="ai-container">
	  <web-view src="https://vr.he29.com/tour/index?id=642065da264f146"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatList: [
					{
						from: 'ai',
						content: '你好！我是AI学习助手，有什么问题可以问我。'
					}
				],
				inputContent: '',
				scrollTop: 0
			}
		},
		methods: {
			sendMessage() {
				if(!this.inputContent.trim()) return;

				// 添加用户消息
				this.chatList.push({
					from: 'user',
					content: this.inputContent
				});

				const question = this.inputContent;
				this.inputContent = '';

				// 模拟AI回复
				setTimeout(() => {
					this.chatList.push({
						from: 'ai',
						content: `关于"${question}"的问题，我正在学习中，很快就能解答您的疑问了。`
					});
					this.scrollToBottom();
				}, 500);
			},
			scrollToBottom() {
				this.$nextTick(() => {
					// 设置一个很大的值保证滚动到底部
					this.scrollTop = 9999;
				});
			}
		}
	}
</script>

<style>
	.ai-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.ai-header {
		background-color: #2979ff;
		color: #ffffff;
		padding: 30rpx 20rpx;
	}

	.ai-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.ai-subtitle {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.chat-container {
		flex: 1;
		padding: 20rpx;
	}

	.chat-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.chat-item.user {
		flex-direction: row-reverse;
	}

	.chat-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 20rpx;
	}

	.chat-avatar image {
		width: 100%;
		height: 100%;
	}

	.chat-content {
		max-width: 70%;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.1);
	}

	.chat-item.ai .chat-content {
		background-color: #e1f3fb;
	}

	.chat-item.user .chat-content {
		background-color: #d8f3df;
	}

	.input-area {
		display: flex;
		padding: 20rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #eee;
	}

	.input-area input {
		flex: 1;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 0 30rpx;
		margin-right: 20rpx;
	}

	.input-area button {
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		background-color: #2979ff;
		color: #ffffff;
	}
</style>
